<template>
    <a-popover placement="bottomLeft" trigger="click" @visibleChange="handleVisibleChange">
        <template #title>
            <flexbox>
                <span> 列设置(支持拖拽排序) </span>
                <a-button size="small" type="primary" class="margin-l-8" @click="handleReset"> 重置</a-button>
            </flexbox>
        </template>
        <template #content>
            <a-checkbox-group style="overflow-y: auto; width: 100%; max-height: 60vh" v-model:value="checkedList" @change="onChange" ref="columnListRef">
                <flexbox justify="space-between" style="margin: 4px 0" v-for="item of columns.default" :key="item.dataIndex">
                    <flexbox>
                        <DragOutlined style="cursor: move" />
                        <a-checkbox :value="item.dataIndex" style="margin-left: 6px">
                            {{ item.title }}
                        </a-checkbox>
                    </flexbox>
                </flexbox>
            </a-checkbox-group>
        </template>
        <SettingOutlined />
    </a-popover>
</template>
<script lang="ts">
import { useSortable } from '@/hooks/common/useSortable';
import { SettingOutlined, DragOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, unref, reactive, toRefs, nextTick } from 'vue';
import { deepClone } from '@/utils/util';
export default defineComponent({
    components: {
        SettingOutlined,
        DragOutlined
        // VerticalAlignTopOutlined,
    },
    props: {
        columns: {
            type: Array,
            default: () => []
        }
    },
    emits: ['setColumns'],
    setup(props, { emit }) {
        const columnListRef = ref<any>();
        const state = reactive<any>({
            checkedList: [],
            columns: {
                check: [], // 选项列
                fixedLeft: [], // 固定左边列
                default: [], // 默认列
                fixedRight: [], // 固定右边列
                action: [] //操作列
            }
        });
        const handleVisibleChange = () => {
            initColumnSettingSortable();
        };
        const onChange = (val: any[]) => {
            const list: any = [];
            state.columns.default.forEach((item) => {
                if (val.includes(item.dataIndex)) {
                    item.checked = true;
                } else {
                    item.checked = false;
                }
                list.push(item);
            });
            const { check, fixedLeft, fixedRight, action } = state.columns;
            const newList = [...check, ...fixedLeft, ...list, ...fixedRight, ...action];
            emit('setColumns', newList);
        };
        const handleReset = () => {
            // 排序并将选择置为true则为初始数据
            let list: any = state.columns.default.sort((a, b) => a.sortNumber - b.sortNumber);
            list = list.map((item: Recordable) => ({
                ...item,
                checked: true
            }));
            const { check, fixedLeft, fixedRight, action } = state.columns;
            const newList = [...check, ...fixedLeft, ...list, ...fixedRight, ...action];
            emit('setColumns', newList);
            // 手动触发初始化
            nextTick(() => {
                init();
            });
        };
        const initColumnSettingSortable = () => {
            nextTick(() => {
                const { initSortable } = useSortable(unref(columnListRef).$el, {
                    onUpdate: (evt: any) => {
                        const { oldIndex, newIndex } = evt;
                        const list: any = deepClone(state.columns.default);
                        const val = list.splice(oldIndex, 1)[0];
                        list.splice(newIndex, 0, val);
                        state.columns.default = list;
                        nextTick(() => {
                            const { check, fixedLeft, fixedRight, action } = state.columns;
                            const newList = [...check, ...fixedLeft, ...list, ...fixedRight, ...action];
                            emit('setColumns', newList);
                        });
                    }
                });
                initSortable();
            });
        };
        const init = () => {
            state.checkedList = [];
            state.columns = {
                check: [], // 选项列
                fixedLeft: [], // 固定左边列
                default: [], // 默认列
                fixedRight: [], // 固定右边列
                action: [] //操作列
            };
            props.columns.forEach((item: any, index: number) => {
                if (['radio', 'checkbox'].includes(item.dataIndex)) {
                    state.columns.check.push(item);
                } else if (item.fixed === 'left') {
                    state.columns.fixedLeft.push(item);
                } else if (item.dataIndex === 'action') {
                    state.columns.action.push(item);
                } else if (item.fixed === 'right') {
                    state.columns.fixedRight.push(item);
                } else {
                    item.checked = Reflect.has(item, 'checked') ? item.checked : true;
                    item.sortNumber = Reflect.has(item, 'sortNumber') ? item.sortNumber : index;
                    state.columns.default.push(item);
                    item.checked && state.checkedList.push(item.dataIndex);
                }
            });
        };
        init();
        return {
            ...toRefs(state),
            handleVisibleChange,
            columnListRef,
            onChange,
            init,
            handleReset
        };
    }
});
</script>
<style lang="less" scoped>
::v-deep(.ant-table-thead > tr:hover) {
    cursor: move;
}
</style>

